<template>
    <el-container class="panel-block">
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            供应商收入明细
          </div>
        </div>
        <div class="sa-flex sa-row-left content">
            <div class="item">
                <div class="item-cell">
                    <div class="title">待入账</div>
                    <div class="amount">¥ {{ money.paid_money }}</div>
                </div>
                <div class="item-cell">
                    <div class="title">已入账</div>
                    <div class="amount">¥ {{ money.completed_money }}</div>
                </div>
                <div class="item-cell">
                    <div class="title">已退回</div>
                    <div class="amount">¥ {{ money.closed_money }}</div>
                </div>
            </div>
          </div>
          <div class="sa-flex sa-row-between">
            <el-form :inline="true" :model="form" >
                <!-- <el-form-item label="订单状态" >
                    <el-select
                        v-model="form.data.status"
                        placeholder="请选择"
                        clearable
                        style="width:100px"
                    >
                        <el-option label="待定" value="pending" />
                        <el-option label="已完成" value="completed" />
                        <el-option label="已支付" value="paid" />
                        <el-option label="未支付" value="unpaid" />
                        <el-option label="已取消" value="cancel" />
                        <el-option label="交易关闭" value="closed" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="对应单号">
                    <el-input v-model="form.data.order_sn"  placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="创建时间"  >
                    <el-date-picker
                        v-model="form.data.update_time"
                        type="datetimerange"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="请选择"
                        end-placeholder="请选择"
                        :shortcuts="shortcuts"
                       style="width:280px"
                    />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
          </div>
		  <el-tabs v-model="form.data.status" @tab-change="handleChange">
				<el-tab-pane label="全部" name=""/>
				<el-tab-pane label="待定" name="pending"/>
				<el-tab-pane label="已完成" name="completed"/>
				<el-tab-pane label="已支付" name="paid"/>
				<el-tab-pane label="未支付" name="unpaid"/>
				<el-tab-pane label="已取消" name="cancel"/>
				<el-tab-pane label="交易关闭" name="closed"/>
			</el-tabs>
      </el-header>
      <el-main class="sa-p-0" v-loading="loading">
        <el-table
          class="sa-table"
          height="100%"
          :data="table.data"
          @selection-change="changeSelection"
          @sort-change="fieldFilter"
          stripe
        >
          <template #empty>
            <sa-empty />
          </template>
          
          <el-table-column  prop="id" label="ID" min-width="100" > </el-table-column>
          <el-table-column label="订单金额" min-width="100">
            <template #default="scope">
              {{ scope.row.pay_fee || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" min-width="70">
            <template #default="scope">
              <el-tag :type="scope.row.status == 'normal' ? 'success' : 'info'">
                {{ scope.row.order ? scope.row.order.status_text || '-' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单号" min-width="120">
            <template #default="scope">
              {{ scope.row.order ? scope.row.order.order_sn || '-' : '' }}
            </template>
          </el-table-column>
         
          <el-table-column label="创建时间" min-width="100">
            <template #default="scope">
              {{ scope.row.update_time || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <sa-view-bar>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  <script>
    export default {
      name: 'shop.admin.earning.bill',
    };
  </script>
  <script setup>
    import { onMounted, reactive, ref, unref } from 'vue';
    import {api} from '../earning.service';
    import sheep from '@/sheep';
    import { ElMessageBox } from 'element-plus';
    import { useModal, usePagination } from '@/sheep/hooks';
    

    import { composeFilter } from '@/sheep/utils';
    import { cloneDeep } from 'lodash';
  

    const form = reactive({
        data:{
            type:'',
            source:'',
            status:'',
            orderNo:'',
            create_time:'',
        },
    });

    const { pageData } = usePagination();
  
    // 表格状态
    const table = reactive({
      data: [],
      page: 1,
      list_rows: 10,
      total: 0,
      order: '',
      sort: '',
      selected: [],
    });
    const loading = ref(false);
    const money = ref({
      closed_money:0,
      completed_money:0,
      paid_money:0,
    });
	function handleChange(){
		onSubmit()
	}
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    // 获取数据
    async function getData(page) {
      loading.value = true;
      if (page) pageData.page = page;
      let search = {}
      Object.entries(form.data).forEach(([key, value]) => {
          if (key === 'status' && value.length > 0) {
              search['order.status'] = [value, 'like'];
          }
          if (key === 'order_sn' && value.length > 0) { // 修正拼写错误
              search['order.order_sn'] = [value, 'like'];
          }
          if (key === 'update_time' && value.length > 0) {
            console.log('value:',value);
              search.update_time = [formatDate(value[0]) + ' 00:00:00' + ' - ' + formatDate(value[1]) + ' 23:59:59', 'range'];
          }
      });

      search =  { search: JSON.stringify(search) };

      const { error, data } = await api.supplier_orderList({
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
        order: table.order,
        sort: table.sort,
      });
      console.log('data',data)
      if (error === 0) {
        table.data = data.list.data;
        pageData.page = data.list.current_page;
        pageData.list_rows = data.list.per_page;
        pageData.total = data.list.total;
        money.value = data
      }
      loading.value = false;
    }
  
    // table 字段排序
    function fieldFilter({ prop, order }) {
      table.order = order == 'ascending' ? 'asc' : 'desc';
      table.sort = prop;
      getData();
    }
    // table 批量选择
    function changeSelection(row) {
      table.selected = row;
    }
    
    function onReset(){
        form.data = {
            type:'',
            source:'',
            status:'',
            orderNo:'',
            create_time:'',
        };
        getData();
    }

    function onSubmit(){
        table.data = [],
        table.page = 1,
        getData();
    }

    onMounted(async () => {
     
      getData();
    });
  </script>
  <style lang="scss" scoped>

  .content{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height:82px;
    background: #FFFFFF;
    margin-bottom: 21px;
    .item{
        width: 400px;
        height: 82px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #DADADA;
        margin-right: 10px;
        padding-top:20px ;
        padding-bottom: 20px;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
       .item-cell{

        .title{
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 12px;
            color: #3F3F3F;
            line-height: 18px;
            text-align: left;
            font-style: normal;
        }
        .amount{
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 18px;
            color: #3F3F3F;
            line-height: 27px;
            text-align: left;
            font-style: normal;
            margin-top: 6px;
        }
       }


    }
  }

 
  </style>